<template>
	<div>
		<el-space>
			<el-tooltip content="项目文档" placement="top">
				<el-icon @click="bindDoc"><Notebook /></el-icon>
			</el-tooltip>
			<el-tooltip content="小程序文档" placement="top">
				<el-icon @click="bindDocfootapp"><Notebook /></el-icon>
			</el-tooltip>
			<el-tooltip content="智慧城市" placement="top">
				<el-icon @click="bindBigScreenZhcity"><OfficeBuilding /></el-icon>
			</el-tooltip>
			<el-tooltip content="大屏可视化" placement="top">
				<el-icon @click="bindBigScreen"><FullScreen /></el-icon>
			</el-tooltip>
			
			<span class="title">{{ user.nick }}</span>
		</el-space>

		<el-dropdown>
			<el-avatar shape="square" :size="30" :src="filterImageUrl(user.url)" />
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item :icon="Setting">系统设置</el-dropdown-item>
					<el-dropdown-item :icon="CirclePlus" @click="onLogout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>

<script setup lang="ts">
import { CirclePlus, Setting, FullScreen, Notebook,OfficeBuilding } from '@element-plus/icons-vue'
import { ref, type Ref, onMounted } from 'vue'
import { getUserFromStore, removeUserFromStore } from '@/common/useStore'
import { useRouter } from 'vue-router'
import { filterImageUrl } from '@/utils'
import { api } from '@/api/index'
const { RequestManagerLogAdd } = api

const router = useRouter()
const user: Ref<{ nick: string; url: string }> = ref({ nick: '', url: '' })

onMounted(() => {
	const user1 = getUserFromStore()
	user.value = { ...user1 }
})

/**
 *  退出
 */
const onLogout = () => {
	addSysLog(user.value.nick)
	localStorage.removeItem('ROLE_ID')
	removeUserFromStore()
	//调用退出接口
	router.replace('/login')
}
/**
 * 添加日志
 */
const addSysLog = async (nick: string) => {
	const content = '退出系统成功'
	const ip = localStorage.getItem('IP') || (window as any).returnCitySN['cip']
	const data = await RequestManagerLogAdd(content, nick, ip)
	localStorage.removeItem('TOKEN')
}
const bindBigScreen = () => {
	window.location.href = 'http://43.136.34.132/bigscreen'
}
const bindBigScreenZhcity = () => {
	window.location.href = 'http://43.136.34.132/zhcs'
}
const bindDoc = () => {
	window.location.href = './doc/index.html'
}
const bindDocfootapp = () => {
	window.location.href = './footapp/index.html'
}
</script>

<style scoped>
.el-dropdown {
	vertical-align: middle;
	cursor: pointer;
}
.title {
	margin: 5px 0;
}
</style>
